import {
  DownOutlined,
  LogoutOutlined,
  UserOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons'
import type { MenuProps } from 'antd'
import { Dropdown, Space, Modal } from 'antd'
import { useSelector, useDispatch } from 'react-redux'
import { removeToken } from '../../store/userSlice'
import './index.scss'

const items: MenuProps['items'] = [
  {
    key: '1',
    label: '退出登录',
    icon: <LogoutOutlined />
  },
  {
    key: '2',
    label: '个人中心',
    icon: <UserOutlined />
  }
]

function HeaderNav() {
  const dispatch = useDispatch()
  const [modal, contextHolder] = Modal.useModal()
  const nickName = useSelector((state: any) => state.userSlice.nickName)
  const dropDownClick = ({ key }: { key: string }) => {
    if (key === '1') {
      modal.confirm({
        title: '温馨提醒!',
        icon: <ExclamationCircleOutlined />,
        content: '确定要退出登录吗?',
        okText: '确认',
        cancelText: '取消',
        onOk: (e) => {
          // 退出登录
          dispatch(removeToken())
        }
      })
    }
  }
  return (
    <div className="header-nav">
      <Dropdown
        menu={{ items, onClick: dropDownClick }}
        className="header-dropdown"
      >
        <Space>
          <UserOutlined />
          {nickName}
          <DownOutlined />
          {contextHolder}
        </Space>
      </Dropdown>
    </div>
  )
}

export default HeaderNav
